<script lang="ts" setup>
import { reactive, ref, watch } from "vue"
import { getAutoRewriteInvoiceListApi, getAutoRewriteConfigApi, saveAutoRewriteConfigApi } from "@/api/invoice"
// import { type FormInstance } from "element-plus"
import { ElMessage } from "element-plus"
import { usePagination } from "@/hooks/usePagination"
// import { useRouter } from "vue-router"

// const router = useRouter()

defineOptions({
  // 命名当前组件
  name: "logList"
})

const loading = ref<boolean>(false)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
const pageData = ref({
  autoRewriteConfig: {
    autoRewrite: false,
    startRewrite: false,
    lastRewriteTime: "",
    shopNameList: []
  }
})

//#region 查
const tableData = ref<any>([])
const tableDetData = ref<any>([])
const searchData = reactive({})
const getTableData = () => {
  loading.value = true
  getAutoRewriteInvoiceListApi({
    startPage: paginationData.startPage,
    pageSize: paginationData.pageSize,
    ...searchData
  })
    .then((res) => {
      paginationData.total = res.count
      tableData.value = res.data
      console.log(tableData.value)
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}

const getAutoRewriteConfig = () => {
  getAutoRewriteConfigApi().then((res) => {
    pageData.value.autoRewriteConfig = res.data
  })
}

// 保存配置点击
const saveAutoConfigClick = () => {
  loading.value = true
  saveAutoRewriteConfigApi(pageData.value.autoRewriteConfig)
    .then((res) => {
      console.log(res)
      ElMessage.success("保存成功")
    })
    .catch(() => {
      tableDetData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}

// const handleSelectionChange = (val: any) => {
//   pageData.value.multipleSelection = val
//   console.log(pageData.value.multipleSelection)
// }

getAutoRewriteConfig()

/** 监听分页参数的变化 */
watch([() => paginationData.startPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>

<template>
  <div class="app-container">
    <el-card v-loading="loading" shadow="never" class="search-wrapper">
      <el-form ref="" label-width="100px">
        <el-form-item label="最后传输时间">
          <div>{{ pageData.autoRewriteConfig.lastRewriteTime }}</div>
        </el-form-item>

        <el-form-item label="开启回传">
          <el-switch
            v-model="pageData.autoRewriteConfig.startRewrite"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>

        <el-form-item label="开启自动回传">
          <el-switch v-model="pageData.autoRewriteConfig.autoRewrite" active-color="#13ce66" inactive-color="#ff4949" />
        </el-form-item>

        <el-form-item label="自动回传店铺">
          <el-checkbox-group
            v-model="pageData.autoRewriteConfig.shopNameList"
            style="display: flex; flex-direction: column"
          >
            <el-checkbox label="天猫-FSL照明旗舰店" />
            <el-checkbox label="拼多多-FSL佛山照明官方旗舰店" />
            <el-checkbox label="拼多多-FSL佛山照明光源旗舰店" />
            <el-checkbox label="拼多多-FSL佛山照明电工旗舰店" />
            <el-checkbox label="快手-佛山照明官方店" />
            <el-checkbox label="抖音-FSL官方旗舰店" />
            <el-checkbox label="阿里巴巴" />
            <el-checkbox label="华为商城-佛山照明官方旗舰店" />
            <el-checkbox label="微盟-FSL微信商城店" />
            <el-checkbox label="FSL南粤分享汇" />
          </el-checkbox-group>
        </el-form-item>

        <el-button type="primary" @click="saveAutoConfigClick">保存配置</el-button>
        <div style="margin-top: 10px" />
      </el-form>
    </el-card>
    <el-card v-loading="loading" shadow="never">
      <div class="toolbar-wrapper" />
      <div class="table-wrapper">
        <el-table :data="tableData">
          <el-table-column type="selection" width="50" align="center" />
          <!-- <el-table-column label="操作" width="80" align="center">
            <template #default="scope">
              <el-button type="primary" bg size="small" @click="rewriteSAP(scope.row)">回传SAP</el-button>
            </template>
          </el-table-column> -->
          <el-table-column prop="sceneType" width="70" label="场景" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.sceneType == 1" type="success">免费</el-tag>
              <el-tag v-if="scope.row.sceneType == 2" type="info">发票</el-tag>
              <el-tag v-if="scope.row.sceneType == 3" type="danger">退货</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="onlineSaleOrderCode" width="200" label="线上单号" align="center" />
          <el-table-column prop="internalInvoiceId" width="90" label="发票序列号" align="center" />
          <el-table-column prop="jstShopName" width="200" label="店铺名称" align="center" />
          <el-table-column prop="remark" width="80" label="发票备注" align="center" />
          <el-table-column prop="invoiceType" width="90" label="发票类型" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.invoiceType == 1" type="success">蓝票</el-tag>
              <el-tag v-if="scope.row.invoiceType == 2" type="danger">红票</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="ifSpecialInvoice" width="90" label="专票/普票" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.ifSpecialInvoice == 0">普票</el-tag>
              <el-tag v-if="scope.row.ifSpecialInvoice == 1" type="success">专票</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="invoiceDate" width="110" label="发票日期" align="center" />
          <el-table-column prop="jstCreateTime" width="100" label="JST创建时间" align="center" />
          <el-table-column prop="reStatus" width="70" label="SAP状态" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.reStatus == 0" type="info">未反写</el-tag>
              <el-tag v-if="scope.row.reStatus == 2" type="success">成功</el-tag>
              <el-tag v-if="scope.row.reStatus == 3" type="danger">失败</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="reCode" width="110" label="SAP销售单号" align="center" />
          <!-- <el-table-column prop="reErrorMsg" label="SAP反写错误信息" align="center" /> -->
          <!-- <el-table-column prop="reErrorMsg" width="200" label="异常信息" align="center">
            <template #default="scope">
              <div class="errorMsgdiv" @click="clickShowErrorMessage(scope.row)">{{ scope.row.reErrorMsg }}</div>
            </template>
          </el-table-column> -->
          <el-table-column prop="reRequestTime" width="100" label="回传时间" align="center" />
          <el-table-column prop="outWarehouseOrderCode" width="100" label="出库单号" align="center" />
          <el-table-column prop="invoiceSn" width="200" label="发票流水号" align="center" />
        </el-table>
      </div>
      <div class="pager-wrapper">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :currentPage="paginationData.startPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- <el-dialog v-model="pageData.dialogErrorMessageVisible" title="异常信息" width="70%">
      <div class="error-log">{{ pageData.currentShowErrorMessage }}</div>
    </el-dialog> -->

    <!-- 发票详情 -->
    <!-- <el-dialog v-model="pageData.dialogDetPage" title="发票明细" width="70%">
      <div class="table-wrapper">
        <el-table :data="tableDetData">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column prop="materialName" label="商品名称" align="center" />
          <el-table-column prop="internalInvoiceDetId" width="180" label="发票明细序列号" align="center" />
          <el-table-column prop="internalInvoiceId" width="100" label="发票序列号" align="center" />
          <el-table-column prop="qty" width="180" label="商品数量" align="center" />
          <el-table-column prop="materialCode" width="180" label="商品编码" align="center" />
          <el-table-column prop="taxNo" width="180" label="税号" align="center" />
          <el-table-column prop="price" width="100" label="含税金额" align="center" />
        </el-table>
      </div>
    </el-dialog> -->

    <!-- 同步发票对话框 -->
    <!-- <el-dialog v-model="pageData.dialogSyncInvoiceVisible" width="70%">
      <div>
        <el-form-item prop="reRequestTime" label="">
          <el-input
            type="textarea"
            :autosize="{ minRows: 8, maxRows: 20 }"
            placeholder="订单号列表"
            v-model="pageData.onlineSaleOrderCodeList"
          />
        </el-form-item>

        <el-button type="primary" @click="syncInvoiceClick">根据线上单号同步发票</el-button>
        <el-divider />
        <el-form-item prop="syncStartDate" label="起始时间">
          <el-date-picker
            v-model="pageData.syncStartDate"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-button type="warning" @click="syncInvoiceByDateClick">根据起始时间同步发票</el-button>

        <br />
      </div>
    </el-dialog> -->
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}

.keywordDiv {
  // max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.errorMsgdiv {
  // max-width: 200px;
  color: red;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.error-log {
  background-color: #333; /* 深灰背景 */
  color: #bada55; /* 亮绿色文字 */
  font-family: "Courier New", monospace; /* 等宽字体 */
  padding: 10px; /* 内边距 */
  border-radius: 5px; /* 边角圆滑 */
  border: 1px solid #666; /* 边框颜色稍浅 */
  white-space: pre-wrap; /* 保持换行和空格 */
  word-wrap: break-word; /* 长单词也可以断行 */
  // max-width: 600px; /* 最大宽度 */
  margin: 20px auto; /* 居中显示 */
}
</style>
